<!-- 文件名：ImportView.vue -->
<!-- 作者：系统自动生成 -->
<!-- 创建日期：2025-04-26 -->
<!-- 描述：数据导入页面视图组件，包含数据导入功能 -->

<template>
  <div>
    <h1>数据导入</h1>
    <!-- 文件上传组件 -->
    <el-upload
      class="upload-demo"
      action=""
      :on-change="handleFileChange"
      :auto-upload="false"
      :show-file-list="false"
    >
      <el-button type="primary">选择文件</el-button>
    </el-upload>
    <!-- 导入按钮 -->
    <el-button type="success" @click="handleImport">导入数据</el-button>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  data() {
    return {
      file: null // 上传的文件
    }
  },
  methods: {
    // 处理文件选择
    handleFileChange(file) {
      this.file = file.raw
    },
    // 处理数据导入
    async handleImport() {
      if (!this.file) {
        this.$message.error('请先选择文件')
        return
      }

      const formData = new FormData()
      formData.append('file', this.file)

      try {
        await request.post('/api/import', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        this.$message.success('数据导入成功')
      } catch (error) {
        this.$message.error('数据导入失败')
      }
    }
  }
}
</script>

<style scoped>
/* 数据导入页面样式 */
</style>